<template>
  <div class="article">
    <template>
      <h2 class="article-news-title">{{ news.title }}</h2>
      <div class="article-center">
        作者：
        {{ news.author }}
        &ensp;
        {{ news.time }}
        &ensp; 点击量：
        {{ news.clicks }}
      </div>
      <hr />
      <p class="article-news-content" v-html="news.content"></p>
    </template>
    <Share />
    <PreviousNext url="/lookup/news" title="学院新闻" :article="1" />
  </div>
</template>
<script>
// 引入Share组件
import Share from "@/pages/Share/Share";
// 引入PreviousNext组件
import PreviousNext from "@/pages/Article/PreviousNext";
// 调用封装的好requests
import requests from "@/api/request";
// 引入QS库
import Qs from "qs";
export default {
  name: "NewsArticle",
  components: { Share, PreviousNext },
  data() {
    return {
      news: [],
      id: this.$route.query.id,
    };
  },
  watch: {
    $route(to, from) {
      this.id = to.query.id;
      const update = (params) => {
        return requests({
          url: "/lookup/news",
          method: "post",
          data: Qs.stringify(
            { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
            { indices: false } //重写false
          ),
          params: { id: this.id }, //向服务器数据库发送id
        });
      };
      update().then((res) => {
        const morenews = res.data; //接收返回值
        this.news = morenews; //news接收数据
      });
    },
  },
  created() {
    // 创建发送请求id传回相应id的内容的实例
    const idnews = (params) => {
      return requests({
        url: "/lookup/news",
        method: "post",
        data: Qs.stringify(
          { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
          { indices: false } //重写false
        ),
        params: { id: this.id }, //向服务器数据库发送id
      });
    };
    // 应用idnews实例
    idnews().then((res) => {
      const morenews = res.data; //接收返回值
      this.news = morenews; //news接收数据
    });
  },
};
</script>
<style>
/* 文章标题 */
.article-news-title {
  font-size: 0.8rem;
  font-weight: normal;
  color: #de2112;
  text-align: center;
  line-height: 1.1rem;
  margin-top: 1.2rem;
}
/* 作者点击量 */
.article-center {
  font-size: 0.48rem;
  padding-top: 0.8rem;
  text-align: center;
}
/* 文章内容 */
.article-news-content {
  font-size: 0.56rem;
  line-height: 0.84rem;
  padding: 0.4rem;
}
/* 文章中的图片 */
.article-news-content p img {
  width: 96.5%;
  margin: 0.2rem;
  border: 1px solid #ccc;
}
/* 文章内容和作者点击量之间的水平线 */
hr {
  margin: 0.72rem 0.2rem 0.72rem 0.2rem;
  width: 96%;
  border: 0;
  border-top: 1px solid #cccccc;
  height: 0.04rem;
}
</style>
